<template>
	<view class="kupono-confirm">
		<titleName :name="name"></titleName>

		<view class="title-bgc"></view>

		<view class="content-wrap">
			<view style="background-color: #fff;padding-top: 24rpx;padding-bottom: 2rpx;margin-bottom: 28rpx;">
				<view class="title-search">
					<div class="ipt-wrap">
						<view style="flex-shrink: 0;">
							<uni-data-picker placeholder="区域" v-model="queryParams.district" class="data-picker"
								popup-title="请选择所在地区" :localdata="dataTree" @change="sessionChange">
							</uni-data-picker>
						</view>
						<view class="line"></view>
						<view style="min-width: 140rpx;">
							<uni-data-select placeholder="状态" v-model="queryParams.wastetype" :localdata="statusList"
								:clear="true"></uni-data-select>
						</view>
						<view class="line" style="margin-left: 0;"></view>
						<input type="text" placeholder-class="placeholder" v-model="queryParams.a"
							placeholder="请输入产废企业名称" />
					</div>

					<button class="add" @click="getList">查询</button>

				</view>
				<view class="date-wrap">
					<view style="min-width: 150rpx;">
						<uni-data-select placeholder="涉废类型" v-model="queryParams.wastetype" :localdata="adviceTypeList"
							:clear="true"></uni-data-select>
					</view>
					<view class="date-ipt" style="width:440rpx;overflow: hidden;position: relative;">
						<template v-if="queryParams.startdate">
							<view class="date">日期</view>
							<view class="line"></view>
						</template>
						<uni-datetime-picker start-placeholder="日" rangeSeparator="—" end-placeholder="期"
							type="daterange" @change="dataChange" />
						<uni-icons type="down" v-if="!queryParams.startdate" size="15"
							style="margin-left: 8rpx;position: absolute;top: 50%;transform: translateY(-50%);left: 74rpx;" />
					</view>
				</view>
			</view>

			<!-- <view style="padding-left: 30rpx;">
				<uni-datetime-picker type="daterange" rangeSeparator="—" start-placeholder="日" end-placeholder="期" @change="dataChange" />
			</view> -->
			<view class="total-data">
				共 <text>{{total}}</text>条信息
			</view>
			<view class="list">
				<noData v-if="dataList.length==0" />
				<view class="item" jumpDetail v-for="item in dataList" :key="item.id">
					<view class="title-wrap">
						产废单位：河南全会有限公司
					</view>
					<view class="line"></view>
					<view class="type">
						<view class="left">涉废类型：{{ adviceTypeList?.find((i)=>i.value==item.wastetype)?.text }}fds</view>
						<text>已退回</text>
					</view>
					<view class="quality">
						处置量：{{item.wastenum}}{{ unitList?.find((i)=>i.value==item.wasteunit)?.text }}3qianke
					</view>
					<view class="time-created">
						<view class="time">处置时间：{{item?.committime}}2024-01-12 </view>
						<button @click="jumpDetail">创建联单</button>

					</view>
				</view>

			</view>
		</view>

	</view>
</template>

<script setup>
	import titleName from '../../components/titleName.vue'
	import noData from '../../components/noDataShow.vue'
	import http from '../../request/index'
	import uploadFile from '../../request/uploadFile.js'
	import {
		onShow,
		onLoad
	} from '@dcloudio/uni-app'
	import {
		reactive,
		ref
	} from 'vue'
	let adviceTypeList = ref([])
	let unitList = ref([])
	let dataList = ref([{}, {}, {}, {}, {}, {}, {}])
	let statusList = ref([])
	let total = ref('')
	let queryParams = reactive({})
	let id = ref('')
	let dataTree = ref()
	let showLine = ref('none')
	let sessionChange = (e) => {

		// let id = e?.detail?.value[e.detail.value.length - 1]?.value

		// queryParams.district = id
		// getList()
	}
	let name = "联单创建确认"
	onLoad((e) => {
		console.log(e, 'e');
		id.value = e.id || ''
		if (e.areaid != 'undefined') {

			queryParams.district = e.areaid
		}


	})
	onShow(() => {
		// getList()
	})

	function mapTree(data) {
		console.log(data, 'data');
		if (data.length <= 0) return

		return data.map((item) => {
			item.text = item.regionname
			item.value = item.id
			if (item.lstSubNodes && item.lstSubNodes.length > 0) {
				item.children = item.lstSubNodes
				for (var i = 0; i < item.lstSubNodes.length; i++) {

					item.children[i].text = item.lstSubNodes[i].regionname
					item.children[i].value = item.lstSubNodes[i].id
					if (item.lstSubNodes[i].lstSubNodes && item.lstSubNodes[i].lstSubNodes.length > 0) {
						mapTree(item.lstSubNodes[i].lstSubNodes)
					}
				}
			}
			return item
		})
	}
	let jumpDetail = (id, name) => {
		uni.navigateTo({
			url: `/operationUnitPageOhter/kuponoconfirmdetail/kuponoconfirmdetail`
		})
	}

	// let getList = () => {
	// 	http({
	// 		url: "/wasteDispose/datalist",
	// 		data: {
	// 			stockenterpriseid: id.value,
	// 			...queryParams
	// 		}
	// 	}).then((res) => {
	// 		if (res.code == 0) {
	// 			dataList.value = res.data.list
	// 			total.value = res.data.total

	// 		}
	// 	})
	// }
	let dataChange = (e) => {
		console.log(e, 'e');
		if (e.length == 0) {
			showLine.value = 'none'
			queryParams.startdate = ''
			queryParams.enddate = ''
			return
		}
		queryParams.startdate = e[0]
		queryParams.enddate = e[1]
		showLine.value = 'block'
	}
	http({
		url: '/listitem/getmodule',
		data: {
			module: 'B03'
		}
	}).then((res) => {
		if (res.code == 0) {
			let data = res.data
			adviceTypeList.value = data.map((item) => {
				return {
					text: item.name,
					value: item.id
				}
			})

		}
	})
	http({
		url: "/listitem/getmodule",
		data: {
			module: 'B02'
		}
	}).then((res) => {
		if (res.code == 0) {
			statusList.value = res.data.map((item) => {
				return {
					text: item.name,
					value: item.id
				}
			})
		}
	})
	http({
		url: '/listitem/getmodule',
		data: {
			module: 'B04'
		}
	}).then((res) => {
		if (res.code == 0) {
			let data = res.data
			unitList.value = data.map((item) => {
				return {
					text: item.name,
					value: item.id
				}
			})

		}
	})
	http({
		url: '/region/datalisttree'
	}).then((res) => {
		if (res.code == 0) {
			let data = res.data
			let cc = mapTree(data)
			dataTree.value = data
		}
	})
</script>

<style lang="scss" scoped>
	:deep(.uni-date-editor--x) {
		border: none;
	}

	:deep(.uni-date__x-input) {
		font-weight: 400;
		font-size: 25rpx;
		color: #333333;
		text-align: center;
	}

	:deep(.ipt-class) {

		font-weight: 400;
		font-size: 25rpx;
		color: #666666;


	}

	:deep(.uni-date-x) {

		flex: none;
		background-color: none;
		height: 63rpx;
		line-height: 63rpx;
	}

	:deep(.range-separator) {
		background-color: #fff;
		display: v-bind('showLine');
		height: 65rpx !important;
		line-height: 63rpx !important;
	}

	:deep(.uniui-down) {
		color: #999 !important;
	}

	:deep(.uniui-clear) {
		font-size: 48rpx !important;
	}

	:deep(.uni-date) {
		background-color: #fff;
		// width: auto !important;
		// flex: none !important;
		overflow: hidden;
	}

	:deep(.uni-stat__select) {
		width: 100%;
	}


	:deep(.uni-select) {
		border: none !important;


		font-weight: 400;
		font-size: 25rpx;
		color: #333333;
		padding-left: 8rpx;
		width: 90% !important;
	}

	:deep(.icon-calendar) {
		display: none;
	}

	:deep(.text-color) {
		color: #0874FA;
	}

	:deep(.uni-date__x-input) {
		font-weight: 400;
		font-size: 25rpx;
		color: #333333;
		text-align: center;
		flex: none
	}

	:deep(.input-value-border) {
		border: none !important;
	}

	:deep(.uni-date-editor--x) {
		border: none;
	}

	:deep(.placeholder) {

		font-family: Source Han Sans CN;
		font-weight: 400;
		font-size: 24rpx;
		color: #999999;

	}

	.kupono-confirm {
		width: 100vw;
		height: 100vh;

		.title-bgc {
			width: 750rpx;
			height: 160rpx;
			background: #0874FA;
		}

		.content-wrap {
			width: 100vw;
			height: calc(100vh - 160rpx);
			background-color: #F3F5F7;
			
			.list {
				height: calc(100vh - 160rpx - 300rpx);
				overflow: scroll;
				display: flex;
				align-items: center;
				flex-direction: column;


				.item:nth-of-type(1) {
					margin-top: 0 !important;
				}

				.item {
					margin-top: 22rpx;

					width: 707rpx;
					height: 305rpx;
					background: #FFFFFF;
					border-radius: 14rpx;
					display: flex;
					flex-direction: column;
					justify-content: space-between;
					flex-shrink: 0;
					padding-top: 30rpx;
					padding-bottom: 25rpx;

					.title-wrap {
						padding-left: 40rpx;
						font-family: Source Han Sans CN;
						font-weight: 500;
						font-size: 31rpx;
						color: #222222;
						line-height: 33rpx;




					}

					.line {
						width: 100%;
						height: 1rpx;
						background: #F3F5F7;
					}

					.type {
						display: flex;
						justify-content: space-between;
						padding-right: 38rpx;

						.left {

							font-family: Source Han Sans CN;
							font-weight: 400;
							font-size: 26rpx;
							color: #333333;

						}

						text {
							width: 97rpx;
							height: 40rpx;
							background: #FFCCCC;
							border-radius: 10rpx;
							line-height: 40rpx;
							text-align: center;
							font-family: Source Han Sans CN;
							font-weight: 500;
							font-size: 22rpx;
							color: #FF0000;

						}
					}

					.type,
					.quality {
						padding-left: 40rpx;
						font-family: Source Han Sans CN;
						font-weight: 400;
						font-size: 26rpx;
						color: #333333;

					}

					.time-created {
						display: flex;
						justify-content: space-between;
						padding-left: 40rpx;
						padding-right: 40rpx;

						.time {

							font-family: Source Han Sans CN;
							font-weight: 400;
							font-size: 26rpx;
							color: #333333;

						}

						button {
							width: 157rpx;
							height: 53rpx;
							background: #0066FF;
							border-radius: 27rpx;
							line-height: 53rpx;
							font-family: Source Han Sans CN;
							font-weight: 500;
							font-size: 22rpx;
							color: #FEFEFF;

						}
					}

				}
			}

			.total-data {

				font-weight: 400;
				font-size: 23rpx;
				color: #333333;
				margin-bottom: 28rpx;
				padding-left: 30rpx;

				text {
					color: #0874FA;
				}
			}

			.date-wrap {
				padding-left: 42rpx;
				margin-bottom: 20rpx;
				margin-top: 14rpx;
				display: flex;
				align-items: center;

				:deep(.uni-select) {

					width: 106% !important;

				}

				.date-ipt {
					display: flex;
					max-width: 574rpx;
					align-items: center;
					border: 1px solid #ccc;
					border-radius: 34rpx;
					padding-left: 30rpx !important;
					margin-left: 45rpx;

					.date {
						color: #333;
						font-size: 24rpx;
					}

					.line {
						width: 1rpx;
						height: 30rpx;
						background-color: #9eaaba;
						margin-left: 10rpx;
						margin-right: 10rpx;
					}

					input {
						flex-shrink: 1;
						padding-right: 5rpx;

					}
				}
			}

			.title-search {
				padding: 0rpx 22rpx 0rpx 22rpx;
				display: flex;
				align-items: center;
				justify-content: space-between;

				.ipt-wrap {
					width: 574rpx;
					height: 67rpx;
					background: #FFFFFF;
					border-radius: 34rpx;
					display: flex;
					align-items: center;
					padding-left: 10rpx;
					border: 1px solid #ccc;


					.line {
						width: 1rpx;
						height: 35rpx;
						background: #E8E8E8;
						margin-left: 12rpx;
						margin-right: 20rpx;
					}
				}

				.search {
					width: 118rpx;
					height: 67rpx;
					background: #FAA708;
					border-radius: 34rpx;
					font-weight: 400;
					font-size: 25rpx;
					color: #FFFFFF;
					line-height: 67rpx;
				}

				.add {
					width: 118rpx;
					height: 67rpx;
					background: #0874FA;
					border-radius: 34rpx;
					font-weight: 400;
					font-size: 25rpx;
					color: #FFFFFF;
					line-height: 67rpx;
				}

				.filtrate {
					display: flex;
					align-items: center;
					margin-left: 19rpx;

					image {
						width: 31rpx;
						height: 33rpx;
						margin-right: 10rpx;
					}

					text {


						font-weight: 500;
						font-size: 25rpx;
						color: #212121;

					}
				}
			}
		}
	}
</style>